<template>
  <div>
    <el-form-item label="显示投票结果" v-if="activeData.config.optionType === 'default'">
      <el-switch v-model="activeData.config.showVoteResult" />
    </el-form-item>

    <el-form-item>
      <span slot="label">
        其他选项必填
        <el-tooltip
          class="item"
          content='如果选项中开启"其他"选项，此属性控制该值是否必填'
          effect="dark"
          placement="top-start"
        >
          <i class="el-icon-question" />
        </el-tooltip>
      </span>
      <el-switch v-model="activeData.config.otherRequired" />
    </el-form-item>

    <el-form-item label="排列方式">
      <el-radio-group v-model="activeData.config.inline">
        <el-radio-button :label="true"> 横向 </el-radio-button>
        <el-radio-button :label="false"> 纵向 </el-radio-button>
      </el-radio-group>
    </el-form-item>

    <el-form-item label="名额设置">
      <div class="cp" @click="$refs.optionQuotaDialog.openQuotaSetting()">
        <el-button size="mini" type="primary" v-if="isQuotaSetting">已设置</el-button>
        <el-button size="mini" v-else>未设置</el-button>
      </div>
    </el-form-item>
    <option-quota :active-data="activeData" ref="optionQuotaDialog" />

    <!--    <el-form-item
      v-if="activeData.config.optionType !== undefined"
      label="选项样式"
    >
      <el-radio-group v-model="activeData.config.optionType">
        <el-radio-button label="default">
          默认
        </el-radio-button>
        <el-radio-button label="button">
          按钮
        </el-radio-button>
      </el-radio-group>
    </el-form-item>-->

    <config-item-option :active-data="activeData" />
  </div>
</template>

<script>
import ConfigItemOption from './option'
import OptionQuota from './optionQuota'

export default {
  name: 'ConfigItemRadio',
  components: { ConfigItemOption },
  props: ['activeData'],
  data() {
    return {
      dialogVisible: false,
      quotaSettingVisible: false,
      quota: ''
    }
  },
  created() {
    if (!Object.hasOwnProperty.call(this.activeData.config, 'withExclusiveChoice')) {
      this.activeData.config.withExclusiveChoice = false
      this.activeData.config.exclusiveChoiceApiCodes = []
      this.activeData.config.quotaBlankWarning = ''
      this.activeData.config.quotaCycleRule = 'fixed'
      this.activeData.config.hideQuota = false
      this.activeData.config.hideChoiceWhenQuotaEmpty = false
      this.activeData.config.quotaRecoverable = true
    }
  },
  computed: {
    isQuotaSetting() {
      const arr = this.activeData.config.options.filter((e) => {
        return typeof e.quotaSetting === 'number'
      })
      return arr.length
    }
  },
  methods: {
    onQuotaSetting() {
      const { quota } = this
      this.activeData.config.options.map((e) => {
        e.quota = quota
        e.quotaSetting = quota
        return e
      })
      this.quotaSettingVisible = false
    },
    onChangeQuota(scope) {
      scope.row.quota = scope.row.quotaSetting
    }
  }
}
</script>

<style scoped></style>
